<template>
	<div class="container">
		<div class="jx-container">
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          类目列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">添加一级类目</el-button>
          </div>
        </div>
        <div class="task_table" v-loading="boo.loading">
          <div class="title-content">
            <span class="th-title" style="width: 4%">序号</span>
            <span class="th-title" style="width: 12%">类目图标</span>
            <span class="th-title" style="width: 13%">一级类目</span>
            <span class="th-title" style="width: 12%">二级类目图标</span>
            <span class="th-title" style="width: 13%">二级类目</span>
            <span class="th-title" style="width: 12%">类别</span>
            <span class="th-title" style="width: 16%">适用店铺类型</span>
            <span class="th-title" style="width: 18%">操作</span>
          </div>
          <div class="table-content">
            <div class="table-con" v-for="(item,index) in list" :key="index">
              <div class="table-bottom">
                <span style="width: 4%" class="tr-item">{{(index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
                <span style="width: 12%" class="tr-item clear ellipsis">
                  <img v-if="item.catalogLogoImgUrl" class="tb" :src="item.catalogLogoImgUrl"/>
                  <async-example v-else :item="item" path="category" :url="`${$api.common.upload}?catalog=setting_category`"></async-example>
                </span>
                <span style="width: 13%" class="tr-item ellipsis">
                  <p v-if="item.catalogName != ''">{{item.catalogName}}</p>
                  <el-input v-else class="tel-value" v-model="item.title"></el-input>
                </span>
                <!-- 二级类目开始 -->
                <div style="width: 99.99%" class="er-list">
                  <!-- 二级类目子项 -->
                  <div class="er-item" style="width: 100%" v-for="(i,idx) in item.children" :key="idx">
                    <span style="width: 12%" class="td-item ellipsis">
                      <img v-if="i.catalogLogoImgUrl" class="tb" :src="i.catalogLogoImgUrl"/>                      
                      <async-example v-else :item="i" path="categoryChild" :url="`${$api.common.upload}?catalog=setting_category`"></async-example>
                    </span>
                    <span style="width: 13%" class="td-item ellipsis">
                      <p v-if="i.catalogName != ''">{{i.catalogName}}</p>
                      <el-input v-else class="tel-value" v-model="i.title"></el-input>
                    </span>
                    <span style="width: 12%;" class="td-item ellipsis">
                      <p v-if="i.catalogType != ''">{{i.catalogType}}</p>
                      <el-select class="tel-value" v-else v-model="i.type" placeholder="请选择">
                        <el-option v-for="(m,midx) in catalogs" :key="midx" :label="m" :value="m"></el-option>
                      </el-select>
                    </span>
                    <span style="width: 16%" class="td-item ellipsis">
                      <p v-if="i.shopCatalogName != ''">{{i.shopCatalogName}}</p>
                      <el-select class="tel-value" v-else v-model="i.shopCatalogId" multiple placeholder="请选择">
                        <el-option v-for="(m,midx) in typelist" :key="midx" :label="m.shopCatalogName " :value="m.shopCatalogId"></el-option>
                      </el-select>
                    </span>
                    <span style="width: 18%" class="td-item ellipsis">
                      <el-button v-if="(i.shopCatalogName == '') && (idx == 0)" @click="submitRow_new(item, 'first')" type="text" size="small">保存1</el-button>
                      <el-button v-if="(i.shopCatalogName == '') && (idx > 0)" @click="submitRow_new(i, 'child')" type="text" size="small">保存2</el-button>
                      <p v-if="i.shopCatalogName != ''">
                        <el-button @click="viewRow(i)" type="text" size="small">编辑</el-button>
                        <el-button v-if="idx <= 0" @click="deleteRow(item)" type="text" size="small">删除</el-button>
                        <el-button v-if="idx > 0" @click="deleteRow(i)" type="text" size="small">删除</el-button>
                        <el-button v-if="idx == 0" @click="addcategory(item)" type="text" size="small">添加子类目</el-button>
                      </p>
                    </span>
                  </div>        
                </div>                
                <!-- 二级类目结束 -->
              </div>
            </div>
          </div>       
        </div>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑类目 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">编辑类目</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="二级类目图标：" prop="catalogLogoImgUrl"> 
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="imgFile"
                      :headers="headers"
                      :action="`${$api.common.upload}?catalog=setting_category`"
                      :show-file-list="false"
                      :on-success="uploadSuccess">
                      <img v-if="currentRow.catalogLogoImgUrl" :src="currentRow.catalogLogoImgUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="二级类目：" prop="catalogName">
                <el-input v-model="currentRow.catalogName" placeholder="请输入二级类目名称"></el-input>
              </el-form-item>
              <el-form-item label="类别：" prop="catalogType">
                <el-select class="tel-value" v-model="currentRow.catalogType" placeholder="请选择">
                  <el-option v-for="(item,index) in catalogs" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="适用店铺类型：" prop="shopCatalogId">
                <el-select class="tel-value" v-model="currentRow.shopCatalogId" multiple placeholder="请选择">
                  <el-option v-for="(item,index) in typelist" :key="index" :label="item.shopCatalogName" :value="item.shopCatalogId"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
    components: {
      'async-example': () => import('./upload/index')
    },
		data() {
			return {
        https: {
          list: this.$api.setting.category,
          type: this.$api.setting.shop.page,
          common: this.$api.common.dict
        },
        boo: {
          loading: false,
          showDialog: false,      
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        other: {
          allRow: 1,
          saveing: false,
          list: {},
        },
        list: '',
        currentRow: {},
        typelist: [],
        catalogs: '',
        params_list: {
          page: 1,
          size: 10,
        },
        rules: {
          catalogLogoImgUrl: [{ required: true, message: '请选择图片', trigger: 'change' }],
          catalogType: [{ required: true, message: '请选择类别', trigger: 'change' }],
          catalogName: [{ required: true, message: '请输入二级类目名称', trigger: 'blur' }],
          shopCatalogId: [{ required: true, message: '请选择店铺类型', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getType()
      _self.getDict('catalogType')
    },
		methods: {
      getDict(type){
        let _self = this
        let params = {
          dictCode: type,
        }
        // 新建判断Map
        let actions = (i,list,)=>{
          return new Map([
            ['catalogType',()=>{
              _self.catalogs = list
            }]
          ]).get(i).call(this)
        }
        let success = (res)=>{
          if(res.data.retCode == 1){
            actions(type,res.data.retObject)
          }else{
            _self.$message.error(res.data.retMsg)
          }
        }
        _self.$axios.get(_self.https.common, params, success) 
      },
      getType(){
        let _self = this
        let params = {}
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            res.retObject.forEach(item=>{
              item.shopCatalogId = item.shopCatalogId.toString()
            })
            _self.typelist = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.type, params, success) 
      },
      getList(){
        let _self = this
        let params = {}
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            res.retObject.forEach(item=>{
              item.isFirst = true
            })
            _self.list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.list.push({
          catalogName: "", //一级类目名
          catalogLogoImgUrl: "", //一级类目logo
          title: "", //bei
          isFirst: true,
          children: [
            {
              catalogName: "", //二级类目名
              title: "",//bei
              type: "", //bei
              catalogLogoImgUrl: "", //二级类目logo
              catalogType: "", //类别
              shopCatalogId: [], //适用店铺类型ID
              shopCatalogName: "", //适用店铺类型
            }
          ]
        })
      },
      uploadSuccess(res, file){
        let _self = this
      	if (res.retCode == 1) {
          _self.currentRow.catalogLogoImgUrl = res.retObject.defaultImgDetail.path
          _self.currentRow.catalogLogoImgId = res.retObject.imgId
        } else {
          _self.$message.error(res.message)
        }
      },
      // 添加类目保存
      submitRow_new(item, type){
        let _self = this
        let params = {}
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        if(type == 'child'){
          if(item.title == '') return _self.$message.error('请输入二级类目名')
          if(item.catalogLogoImgId == '') return _self.$message.error('请上传二级类目logo')
          if(item.type == '') return _self.$message.error('请选择类别')
          if(item.shopCatalogId.length == 0) return _self.$message.error('请选择店铺类型')
          params = {
            catalogParentId: item.catalogParentId,  // 一级类目ID
            catalogLogoImgId: item.catalogLogoImgId,  // 二级类目logo
            catalogName: item.title,  // 二级类目
            catalogType: item.type,  // 类别
            shopCatalogId: item.shopCatalogId.toString(),  // 适用店铺类型
          }
          _self.$axios.post(_self.https.list.addChild, params, success) 
        }else{
          if(item.title == '') return _self.$message.error('请输入一级类目名')
          if(item.catalogParentLogoImgId == '') return _self.$message.error('请上传一级类目logo')
          if(!item.children[0]) return _self.$message.error('请完善二级类目信息')
          if(item.children[0].title == '') return _self.$message.error('请输入二级类目名')
          if(item.children[0].catalogLogoImgId == '') return _self.$message.error('请上传二级类目logo')
          if(item.children[0].type == '') return _self.$message.error('请选择类别')
          if(item.children[0].shopCatalogId.length == 0) return _self.$message.error('请选择店铺类型')
          params = {
            catalogParentName: item.title,  // 一级类目
            catalogParentLogoImgId: item.catalogParentLogoImgId,  // 一级类目logo
            catalogName: item.children[0].title,  // 二级类目
            catalogLogoImgId: item.children[0].catalogLogoImgId,  // 二级类目logo
            catalogType: item.children[0].type,  // 类别
            shopCatalogId: item.children[0].shopCatalogId.toString(),  // 适用店铺类型
          }
          _self.$axios.post(_self.https.list.add, params, success)
        }
      },
      addcategory(item){
        let _self = this
        item.children.push(
          {
            catalogName: "", //二级类目名
            catalogLogoImgUrl: "", //二级类目logo
            catalogType: "", //类别
            shopCatalogId: [], //适用店铺类型ID
            shopCatalogName: "", //适用店铺类型
            title: "",//bei
            type: "", //bei
            catalogParentId: item.catalogId
          }
        )
      },
      viewRow(item){
        let _self = this
        _self.boo.showDialog = true 
        item.shopCatalogId = item.shopCatalogId.toString().split(',')
        _self.currentRow = JSON.parse(JSON.stringify(item))
      },
      // 删除
      deleteRow(item){
        let _self = this
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.getList()
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.delete(`${_self.https.list.detail}${item.catalogId}`, {}, success) 
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){ 
            let params = {
              catalogLogoImgId: _self.currentRow.catalogLogoImgId || '',
              catalogParentId: _self.currentRow.catalogParentId,
              catalogName: _self.currentRow.catalogName,
              catalogType: _self.currentRow.catalogType,
              shopCatalogId: _self.currentRow.shopCatalogId,
            }    
            _self.boo.saveing = true
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.getList()
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
              _self.boo.showDialog = false
            }
            _self.$axios.put(`${_self.https.list.detail}${_self.currentRow.catalogId}`, params, success)  
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
.title-content
  display: table
  font-size: 13px
  text-align: center
  background: #F5FAFE
  width: 100%
  table-layout: fixed
  .th-title
    display: table-cell
    line-height: 40px
    font-weight: 600
    color: #333
.table-content
  font-size: 13px
  .table-bottom
    display: table
    width: 100%
    border: 1px solid #ebeef5
    border-right: 0
    border-bottom: 0
    border-top: 0
    table-layout: fixed
    min-height: 72px
    .tb
      width: 50px
      height: 50px
      border-radius: 50%
      vertical-align: middle
    .tr-item
      text-align: center
      display: table-cell
      vertical-align: middle
      padding: 5px
      border-right: 1px solid #ebeef5
      position: relative
.table-con
  color: #333
  border-bottom: 1px solid #f2f2f2
.er-list
  .er-item +.er-item
    border-top: 1px solid #f2f2f2
  .er-item
    display: table
    .td-item
      text-align: center
      display: table-cell
      vertical-align: middle
      padding: 5px
      border-right: 1px solid #ebeef5
      position: relative
      height: 72px    
/deep/ .avatar-uploader-icon
  height: 50px
  line-height: 50px
  width: 50px
/deep/ .el-upload
  height: 50px !important
/deep/ .jx-uploader .avatar-uploader-icon
  width: 50px
  height: 50px
  line-height: 50px
/deep/ .jx-uploader img
  width: 50px
  height: 50px
</style>
